<template>
  <div class="tmail-content">
    <div class="content-nav">
      <div class="content-nav-title">主题市场</div>
      <div class="content-nav-bar">
        <div>
          <img
            src="https://img.alicdn.com/tfs/TB1ztBlaMMPMeJjy1XbXXcwxVXa-200-60.png"
          />
        </div>
        <div>
          <img
            src="https://img.alicdn.com/tfs/TB1t5ObaBxRMKJjy0FdXXaifFXa-200-60.png"
          />
        </div>
        <div><a href="#">天猫会员</a></div>
        <div><a href="#">喵鲜生</a></div>
        <div><a href="#">医药馆</a></div>
        <div><a href="#">魅力慧</a></div>
        <div><a href="#">飞猪旅行</a></div>
        <div><a href="#">苏宁易购</a></div>
        <div><a href="#">天猫内容</a></div>
      </div>
    </div>
    <div class="content-index">
      <div class="left-menu">
        <leftmenu-view></leftmenu-view>
      </div>
      <div class="swiper-box">
        <swiper-view>
          
        </swiper-view>
        <smallswiper></smallswiper>
      </div>
      <div class="right-menu">
        <rigmenu-view></rigmenu-view>
      </div>
    </div>
  </div>
</template>

<script>
import SwiperView from "components/content/swiper/SwiperView.vue";
import LeftmenuView from "../../../components/content/navview/LeftmenuView.vue";
import Smallswiper from '../../../components/content/swiper/Smallswiper.vue';
import RigmenuView from '../../../components/content/navview/RigmenuView.vue';
export default {
  components: { LeftmenuView, SwiperView, Smallswiper, RigmenuView },
};
</script>
   
<style scoped>
.tmail-content {
  width: 1190px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 15px;
  padding: 5px 5px 5px 20px;
  height: auto;
}
.tmail-content > .content-nav {
  height: 43px;
  display: flex;
}
.tmail-content > .content-nav > .content-nav-title {
  font-size: 16px;
  color: #fe0317;
  float: left;
  width: 20%;
  text-align: left;
  line-height: 45px;
  font-weight: bold;
}
.tmail-content > .content-nav > .content-nav-bar {
  width: 80%;
  display: flex;
}
.tmail-content > .content-nav > .content-nav-bar > div {
  line-height: 43px;
  margin: 0 10px;
}
.tmail-content > .content-nav > .content-nav-bar img {
  width: 100px;
  height: 30px;
}
.tmail-content > .content-nav > .content-nav-bar a {
  color: #000000;
  font-size: 16px;
  line-height: 47px;
  text-decoration: none;
}
.tmail-content > .content-nav > .content-nav-bar a:hover {
  color: #fe0317;
  border-bottom: 1px solid #000000;
}
.content-index {
  display: flex;
}
.content-index > .left-menu {
  width: 20%;
}
.swiper-box {
  margin-top: 20px;
  width: 50%;
}
.right-menu{
  width: 28%;
  background:  #f6e5e5;
  margin-left: 20px;
  border-radius: 10px;
  padding: 15px;
  margin-top: 18px;
}

</style>